<!-- 详细页面 -->
<template>
  <div class="see">
    <!-- <el-dialog
      title="批次详情"
      :visible.sync="dialogVisible"
      width="80%"
      class="worksee"
      :before-close="handleClose"
    > -->
    <div>
      <el-card class="box-card row1" shadow="hover" v-loading="loading1">
        <div>
          <div class="tit">
            <div>
              <strong>{{
                $t("mesProdOrder.productionWorkOrderInformation")
              }}</strong>
              <div class="right">
                <div
                  class="icon"
                  :class="
                    detail.orderStatus == 5
                      ? 'bkred'
                      : detail.orderStatus == 4
                      ? 'bksuccess'
                      : ''
                  "
                ></div>
                <span
                  :class="
                    detail.orderStatus == 5
                      ? 'red'
                      : detail.orderStatus == 4
                      ? 'success'
                      : ''
                  "
                  >{{ orderStatusText }}</span
                >
              </div>
            </div>
            <div>
              <el-button
                icon="el-icon-arrow-left"
                @click="$router.push('/order/mesProdOrder')"
                >{{ $t("common.back") }}</el-button
              >
            </div>
          </div>

          <el-steps :active="Number(detail.orderStatus)" class="step">
            <el-step :class="{ activeIcon: detail.orderStatus > 0 }">
              <p slot="icon">
                <svg
                  t="1665296454861"
                  class="icon"
                  viewBox="0 0 1024 1024"
                  version="1.1"
                  xmlns="http://www.w3.org/2000/svg"
                  p-id="1979"
                  width="38"
                  height="38"
                >
                  <path
                    d="M518.1 1023.7H149.8C71.1 1023.7 7 959 7 879.4V145.1C7 65.5 71.1 0.8 149.8 0.8h589.4c78.7 0 142.7 64.7 142.7 144.3V465c0 23.2-18.8 42-42 42s-42-18.8-42-42V145.1c0-33.3-26.4-60.3-58.7-60.3H149.8c-32.4 0-58.7 27.1-58.7 60.3v734.3c0 33.3 26.4 60.3 58.7 60.3h368.4c23.2 0 42 18.8 42 42s-18.9 42-42.1 42z"
                    fill="#1296db"
                    p-id="1980"
                  ></path>
                  <path
                    d="M640.5 205.1H246.4c-23.5 0-42.7 19.2-42.7 42.7s19.2 42.7 42.7 42.7h394.1c23.5 0 42.7-19.2 42.7-42.7s-19.2-42.7-42.7-42.7zM640.5 403.8H246.4c-23.5 0-42.7 19.2-42.7 42.7s19.2 42.7 42.7 42.7h394.1c23.5 0 42.7-19.2 42.7-42.7s-19.2-42.7-42.7-42.7zM475.5 602.4h-229c-23.5 0-42.7 19.2-42.7 42.7 0 23.5 19.2 42.7 42.7 42.7h229c23.5 0 42.7-19.2 42.7-42.7-0.1-23.5-19.3-42.7-42.7-42.7zM787.1 660c-16.5 0-29.9 13.5-29.9 29.9v92.3c0 16.5 13.5 29.9 29.9 29.9s29.9-13.5 29.9-29.9v-92.3c0.1-16.4-13.4-29.9-29.9-29.9z"
                    fill="#1296db"
                    p-id="1981"
                  ></path>
                  <path
                    d="M864.1 752.3h-77c-16.5 0-29.9 13.5-29.9 29.9s13.5 29.9 29.9 29.9h77c16.5 0 29.9-13.5 29.9-29.9s-13.4-29.9-29.9-29.9z"
                    fill="#1296db"
                    p-id="1982"
                  ></path>
                  <path
                    d="M787.5 1006.7c-62.9 0-122.1-24.5-166.6-69s-69-103.7-69-166.6c0-62.9 24.5-122.1 69-166.6s103.7-69 166.6-69 122.1 24.5 166.6 69 69 103.7 69 166.6c0 62.9-24.5 122.1-69 166.6s-103.7 69-166.6 69z m0-398.2c-89.7 0-162.6 73-162.6 162.6 0 89.7 73 162.6 162.6 162.6s162.6-73 162.6-162.6c0-89.7-72.9-162.6-162.6-162.6z"
                    fill="#1296db"
                    p-id="1983"
                  ></path>
                </svg>
              </p>
              <div slot="title">
                <p>{{ $t("mesProdOrderPlan.waiteIssue") }}</p>
                <!-- <p class="date">2022-10-1 12:11:00</p> -->
              </div>
            </el-step>
            <el-step :class="{ activeIcon: detail.orderStatus > 1 }">
              <p slot="icon">
                <svg
                  t="1665212604528"
                  class="icon"
                  viewBox="0 0 1024 1024"
                  version="1.1"
                  xmlns="http://www.w3.org/2000/svg"
                  p-id="1852"
                  width="48"
                  height="48"
                >
                  <path
                    d="M293.236364 400.290909h372.363636c16.290909 0 27.927273-11.636364 27.927273-27.927273s-11.636364-27.927273-27.927273-27.927272h-372.363636c-16.290909 0-27.927273 11.636364-27.927273 27.927272s11.636364 27.927273 27.927273 27.927273zM293.236364 500.363636h372.363636c16.290909 0 27.927273-11.636364 27.927273-27.927272s-11.636364-27.927273-27.927273-27.927273h-372.363636c-16.290909 0-27.927273 11.636364-27.927273 27.927273s11.636364 27.927273 27.927273 27.927272zM293.236364 602.763636h186.181818c16.290909 0 27.927273-11.636364 27.927273-27.927272s-11.636364-27.927273-27.927273-27.927273h-186.181818c-16.290909 0-27.927273 11.636364-27.927273 27.927273s11.636364 27.927273 27.927273 27.927272zM409.6 646.981818h-116.363636c-16.290909 0-27.927273 11.636364-27.927273 27.927273s11.636364 27.927273 27.927273 27.927273h116.363636c16.290909 0 27.927273-11.636364 27.927273-27.927273s-13.963636-27.927273-27.927273-27.927273z"
                    fill="#1296db"
                    p-id="1853"
                  ></path>
                  <path
                    d="M816.872727 628.363636V186.181818c0-41.890909-32.581818-74.472727-74.472727-74.472727h-69.818182c-11.636364-27.927273-37.236364-46.545455-69.818182-46.545455h-232.727272c-30.254545 0-58.181818 18.618182-69.818182 46.545455h-69.818182C188.509091 111.709091 155.927273 144.290909 155.927273 186.181818v698.181818c0 41.890909 32.581818 74.472727 74.472727 74.472728h512c37.236364 0 67.490909-27.927273 74.472727-62.836364 32.581818-34.909091 53.527273-81.454545 53.527273-134.981818-2.327273-51.2-20.945455-97.745455-53.527273-132.654546z m-146.618182 274.618182c-79.127273 0-141.963636-62.836364-141.963636-141.963636s62.836364-141.963636 141.963636-141.963637 141.963636 62.836364 141.963637 141.963637-62.836364 141.963636-141.963637 141.963636zM351.418182 139.636364c0-9.309091 9.309091-18.618182 18.618182-18.618182h232.727272c9.309091 0 18.618182 9.309091 18.618182 18.618182v23.272727c0 9.309091-9.309091 18.618182-18.618182 18.618182h-232.727272c-9.309091 0-18.618182-9.309091-18.618182-18.618182V139.636364zM230.4 902.981818c-9.309091 0-18.618182-9.309091-18.618182-18.618182V186.181818c0-9.309091 9.309091-18.618182 18.618182-18.618182h65.163636c2.327273 39.563636 34.909091 69.818182 74.472728 69.818182h232.727272c39.563636 0 72.145455-30.254545 74.472728-69.818182h65.163636c9.309091 0 18.618182 9.309091 18.618182 18.618182v400.290909a197.655273 197.655273 0 0 0-286.254546 176.872728c0 55.854545 23.272727 104.727273 60.509091 141.963636H230.4z"
                    fill="#1296db"
                    p-id="1854"
                  ></path>
                  <path
                    d="M740.072727 733.090909H698.181818v-41.890909c0-16.290909-11.636364-27.927273-27.927273-27.927273s-27.927273 11.636364-27.927272 27.927273v41.890909h-41.890909c-16.290909 0-27.927273 11.636364-27.927273 27.927273s11.636364 27.927273 27.927273 27.927273h41.890909v41.890909c0 16.290909 11.636364 27.927273 27.927272 27.927272s27.927273-11.636364 27.927273-27.927272v-41.890909h41.890909c16.290909 0 27.927273-11.636364 27.927273-27.927273s-11.636364-27.927273-27.927273-27.927273z"
                    fill="#1296db"
                    p-id="1855"
                  ></path>
                </svg>
              </p>
              <div slot="title">
                <p>{{ $t("mesProdOrderPlan.issued") }}</p>
                <!-- <p class="date">2022-10-1 12:11:00</p> -->
              </div>
            </el-step>
            <el-step :class="{ activeIcon: detail.orderStatus > 2 }">
              <p slot="icon">
                <svg
                  t="1665222435282"
                  class="icon"
                  viewBox="0 0 1024 1024"
                  version="1.1"
                  xmlns="http://www.w3.org/2000/svg"
                  p-id="1725"
                  width="48"
                  height="48"
                >
                  <path
                    d="M293.236364 400.290909h372.363636c16.290909 0 27.927273-11.636364 27.927273-27.927273s-11.636364-27.927273-27.927273-27.927272h-372.363636c-16.290909 0-27.927273 11.636364-27.927273 27.927272s11.636364 27.927273 27.927273 27.927273zM293.236364 500.363636h372.363636c16.290909 0 27.927273-11.636364 27.927273-27.927272s-11.636364-27.927273-27.927273-27.927273h-372.363636c-16.290909 0-27.927273 11.636364-27.927273 27.927273s11.636364 27.927273 27.927273 27.927272zM293.236364 602.763636h186.181818c16.290909 0 27.927273-11.636364 27.927273-27.927272s-11.636364-27.927273-27.927273-27.927273h-186.181818c-16.290909 0-27.927273 11.636364-27.927273 27.927273s11.636364 27.927273 27.927273 27.927272zM409.6 646.981818h-116.363636c-16.290909 0-27.927273 11.636364-27.927273 27.927273s11.636364 27.927273 27.927273 27.927273h116.363636c16.290909 0 27.927273-11.636364 27.927273-27.927273s-13.963636-27.927273-27.927273-27.927273z"
                    fill="#1296db"
                    p-id="1726"
                  ></path>
                  <path
                    d="M868.072727 761.018182c0-51.2-20.945455-97.745455-51.2-132.654546V186.181818c0-41.890909-32.581818-74.472727-74.472727-74.472727h-69.818182c-11.636364-27.927273-37.236364-46.545455-69.818182-46.545455h-232.727272c-30.254545 0-58.181818 18.618182-69.818182 46.545455h-69.818182C188.509091 111.709091 155.927273 144.290909 155.927273 186.181818v698.181818c0 41.890909 32.581818 74.472727 74.472727 74.472728h512c37.236364 0 67.490909-27.927273 74.472727-62.836364 30.254545-34.909091 51.2-83.781818 51.2-134.981818z m-337.454545 0c0-79.127273 62.836364-141.963636 141.963636-141.963637s141.963636 62.836364 141.963637 141.963637-62.836364 141.963636-141.963637 141.963636-141.963636-62.836364-141.963636-141.963636zM351.418182 139.636364c0-9.309091 9.309091-18.618182 18.618182-18.618182h232.727272c9.309091 0 18.618182 9.309091 18.618182 18.618182v23.272727c0 9.309091-9.309091 18.618182-18.618182 18.618182h-232.727272c-9.309091 0-18.618182-9.309091-18.618182-18.618182V139.636364zM230.4 902.981818c-9.309091 0-18.618182-9.309091-18.618182-18.618182V186.181818c0-9.309091 9.309091-18.618182 18.618182-18.618182h65.163636c2.327273 39.563636 34.909091 69.818182 74.472728 69.818182h232.727272c39.563636 0 72.145455-30.254545 74.472728-69.818182h65.163636c9.309091 0 18.618182 9.309091 18.618182 18.618182v400.290909a197.655273 197.655273 0 0 0-286.254546 176.872728c0 55.854545 23.272727 104.727273 60.509091 141.963636H230.4z"
                    fill="#1296db"
                    p-id="1727"
                  ></path>
                  <path
                    d="M716.8 695.854545l-69.818182 69.818182-25.6-25.6c-11.636364-11.636364-27.927273-11.636364-39.563636 0s-11.636364 27.927273 0 39.563637l44.218182 44.218181c4.654545 4.654545 11.636364 9.309091 18.618181 9.309091s13.963636-2.327273 18.618182-9.309091l90.763637-90.763636c11.636364-11.636364 11.636364-27.927273 0-39.563636-9.309091-9.309091-25.6-9.309091-37.236364 2.327272z"
                    fill="#1296db"
                    p-id="1728"
                  ></path>
                </svg>
              </p>

              <div slot="title">
                <p>{{ $t("mesProdOrderPlan.ready") }}</p>
                <!-- <p class="date">2022-10-1 12:11:00</p> -->
              </div>
            </el-step>
            <el-step :class="{ activeIcon: detail.orderStatus > 3 }">
              <p slot="icon">
                <svg
                  t="1665222353110"
                  class="icon"
                  viewBox="0 0 1024 1024"
                  version="1.1"
                  xmlns="http://www.w3.org/2000/svg"
                  p-id="29841"
                  width="48"
                  height="48"
                >
                  <path
                    d="M288.906318 800.906318L28.630356 650.689906v-297.458243l260.275962-148.729121 260.275962 148.729121v297.458243zM112.662309 602.352941L288.906318 704.232389 465.150327 602.352941V398.594045L288.906318 297.458243 112.662309 398.594045z"
                    fill="#1296db"
                    p-id="29842"
                  ></path>
                  <path
                    d="M288.906318 500.473493m-84.031953 0a84.031954 84.031954 0 1 0 168.063907 0 84.031954 84.031954 0 1 0-168.063907 0Z"
                    fill="#1296db"
                    p-id="29843"
                  ></path>
                  <path
                    d="M809.458243 429.083515L623.546841 321.998548V107.084967L809.458243 0 995.369644 107.084967v214.913581zM683.782135 287.047204l125.676108 74.364561 125.676107-74.364561v-148.729121L809.458243 69.159041l-125.676108 74.364561z"
                    fill="#1296db"
                    p-id="29844"
                  ></path>
                  <path
                    d="M809.458243 214.91358m-60.235295 0a60.235294 60.235294 0 1 0 120.470589 0 60.235294 60.235294 0 1 0-120.470589 0Z"
                    fill="#1296db"
                    p-id="29845"
                  ></path>
                  <path
                    d="M809.458243 1024L623.546841 916.915033V702.001452L809.458243 594.916485 995.369644 702.001452v214.913581z m-125.676108-142.036311l125.676108 74.364561 125.676107-74.364561v-148.729121l-125.676107-74.364561-125.676108 74.364561z"
                    fill="#1296db"
                    p-id="29846"
                  ></path>
                  <path
                    d="M809.458243 809.830065m-60.235295 0a60.235294 60.235294 0 1 0 120.470589 0 60.235294 60.235294 0 1 0-120.470589 0Z"
                    fill="#1296db"
                    p-id="29847"
                  ></path>
                </svg>
              </p>

              <div slot="title">
                <p>{{ $t("mesProdOrderPlan.inProgress") }}</p>
                <!-- <p class="date">2022-10-1 12:11:00</p> -->
              </div>
            </el-step>
            <el-step>
              <p slot="icon">
                <svg
                  t="1665222006711"
                  class="icon"
                  viewBox="0 0 1024 1024"
                  version="1.1"
                  xmlns="http://www.w3.org/2000/svg"
                  p-id="1725"
                  width="48"
                  height="48"
                >
                  <path
                    d="M865.745455 372.363636c0-2.327273 0-4.654545-2.327273-6.981818L781.963636 116.363636c-9.309091-30.254545-39.563636-51.2-69.818181-51.2H311.854545c-32.581818 0-60.509091 20.945455-69.818181 51.2L160.581818 363.054545c0 2.327273-2.327273 4.654545-2.327273 6.981819v512c0 41.890909 32.581818 74.472727 74.472728 74.472727h558.545454c41.890909 0 74.472727-32.581818 74.472728-74.472727V372.363636zM295.563636 132.654545c2.327273-6.981818 9.309091-11.636364 18.618182-11.636363h397.963637c6.981818 0 16.290909 4.654545 18.618181 11.636363l69.818182 211.781819H225.745455l69.818181-211.781819z m174.545455 600.436364c0-93.090909 76.8-169.890909 169.890909-169.890909s169.890909 76.8 169.890909 169.890909-76.8 169.890909-169.890909 169.890909-169.890909-76.8-169.890909-169.890909zM809.890909 884.363636c0 9.309091-9.309091 18.618182-18.618182 18.618182h-2.327272l20.945454-20.945454v2.327272z m-169.890909-377.018181c-123.345455 0-225.745455 102.4-225.745455 225.745454 0 67.490909 30.254545 128 76.8 169.890909H232.727273c-9.309091 0-18.618182-9.309091-18.618182-18.618182V400.290909h595.781818v183.854546c-41.890909-46.545455-102.4-76.8-169.890909-76.8z"
                    fill="#1296db"
                    p-id="1726"
                  ></path>
                  <path
                    d="M758.690909 714.472727l-100.072727-100.072727c-11.636364-11.636364-27.927273-11.636364-39.563637 0s-11.636364 27.927273 0 39.563636l51.2 51.2h-130.327272c-16.290909 0-27.927273 11.636364-27.927273 27.927273s11.636364 27.927273 27.927273 27.927273h130.327272l-51.2 51.2c-11.636364 11.636364-11.636364 27.927273 0 39.563636 4.654545 4.654545 11.636364 9.309091 18.618182 9.309091s13.963636-2.327273 18.618182-9.309091l100.072727-100.072727c13.963636-9.309091 13.963636-27.927273 2.327273-37.236364z"
                    fill="#1296db"
                    p-id="1727"
                  ></path>
                </svg>
              </p>
              <div slot="title">
                <p>{{ $t("mesProdOrderPlan.completed") }}</p>
                <!-- <p class="date">2022-10-1 12:11:00</p> -->
              </div>
            </el-step>
          </el-steps>
          <div class="drawer-line"></div>
          <el-descriptions
            class="margin-top"
            title=""
            :column="3"
            size="medium"
            :colon="false"
          >
            <el-descriptions-item
              :label="`${$t('mesProdOrderPlan.workOrderCode')}：`"
              ><span class="fong-w">{{
                detail.orderCode
              }}</span></el-descriptions-item
            >
            <el-descriptions-item :label="`${$t('mesProdOrder.modelNumber')}：`"
              ><span class="fong-w">{{
                detail.prodName
              }}</span></el-descriptions-item
            >
            <el-descriptions-item
              :label="`${$t('mesSalesOrder.planCode')}：`"
              >{{ detail.planCode }}</el-descriptions-item
            >
            <!-- <el-descriptions-item label="销售订单号：">{{
              detail.saleCode
            }}</el-descriptions-item> -->
            <!-- <el-descriptions-item label="生产工厂:1">
                {{ detail.bing }}
              </el-descriptions-item> -->
            <el-descriptions-item
              :label="`${$t('mesProdOrder.schedulingDate')}：`"
            >
              <span v-if="detail.planBeginDate">
                {{
                  `${detail.planBeginDate} ~ ${
                    detail.planEndDate || $t("mesProdOrderPlan.tillNow")
                  } `
                }}
              </span>
            </el-descriptions-item>
            <el-descriptions-item
              :label="`${$t('mesProdOrderPlan.workshopName')}：`"
              >{{ detail.workshopName }}</el-descriptions-item
            >
            <el-descriptions-item :label="`${$t('mesCoEsopInfo.line')}：`">{{
              detail.lineName || $t("my.noData")
            }}</el-descriptions-item>
            <!-- <el-descriptions-item label="1">
                <el-tag size="small">{{ detail.bing }}</el-tag>
              </el-descriptions-item> -->
          </el-descriptions>

          <div class="drawer-line"></div>
          <el-descriptions
            class="margin-top"
            title=""
            :column="3"
            size="medium"
            :colon="false"
          >
            <el-descriptions-item
              :label="`${$t('mesGateOrderWhite.prodName')}：`"
              ><span class="fong-w">{{
                detail.prodName
              }}</span></el-descriptions-item
            >
            <el-descriptions-item
              :label="`${$t('mesGateOrderWhite.prodCode')}：`"
              ><span class="fong-w">{{
                detail.prodCode
              }}</span></el-descriptions-item
            >
            <!-- <el-descriptions-item label="产品规格：1">{{
                detail.bing
              }}</el-descriptions-item> -->

            <el-descriptions-item
              :label="`${$t('mesProdOrderPlan.planQty')}：`"
            >
              <p>
                <span class="count">{{ detail.quantity }}</span>
                <!-- <span class="">件</span> -->
              </p>
            </el-descriptions-item>
            <el-descriptions-item
              :label="`${$t('mesProdOrderPlan.qualified')}：`"
            >
              <p>
                <span class="count">{{ detail.qualifiedQty }}</span>
                <!-- <span class="">件</span> -->
              </p>
            </el-descriptions-item>
            <el-descriptions-item
              :label="`${$t('mesProdOrderPlan.waitePro')}：`"
            >
              <p>
                <span class="count">{{ detail.waitQuantity || 0 }}</span>
              </p>
            </el-descriptions-item>
            <el-descriptions-item
              :label="`${$t('mesProdOrderPlan.unqualified')}：`"
            >
              <p>
                <span class="count">{{ detail.unqualifiedQty || 0 }}</span>
              </p>
            </el-descriptions-item>
            <el-descriptions-item :label="`${$t('mesProdOrder.progress')}：`">
              <div class="progress">
                <el-progress
                  :text-inside="true"
                  :stroke-width="26"
                  :percentage="detail.progress || 0"
                >
                </el-progress>
              </div>
            </el-descriptions-item>
          </el-descriptions>
        </div>
      </el-card>

      <br />
      <el-card class="row2" v-loading="loading1" v-if="detail.technologyCode">
        <div>
          <div class="tit">
            <div class="drawer-card-title__mark"></div>
            <span class="drawer-card-title__text ml8">{{
              $t("mesProdOrder.processFlow")
            }}</span>
            <span class="drawer-card-title__text ml5"
              >{{ $t("mesProdOrder.code") }}：{{ detail.technologyCode }}</span
            >
            <span class="drawer-card-title__text ml5"
              >{{ $t("mesProdOrder.name") }}：{{ detail.technologyName }}</span
            >
            <span class="drawer-card-title__text ml5"
              >{{ $t("mesProdOrderPlan.versionNumber") }}：{{
                detail.versionNumber
              }}</span
            >
          </div>
          <div class="centent flex-ac overflow">
            <div
              class="process_chunk flex-ac flex-col"
              :key="i"
              v-for="(ite, i) in radiusList"
            >
              <!-- 连接线  by jie-->
              <div :class="i == 0 ? '' : 'raduis_line'"></div>
              <div
                class="raduis strong font-16 flex-ac content-center"
                :class="
                  Number(ite.ratio) == 0
                    ? 'rihg-0'
                    : Number(ite.ratio) == 100
                    ? 'rihg-100'
                    : 'rihg-10'
                "
              >
                <p>{{ ite.ratio || 0 }}%</p>
              </div>
              <div
                class="font-14 color-333 mt8 cursor-pointer el-tooltip__trigger el-tooltip__trigger"
              >
                <span v-if="!ite.technologyFile" :title="ite.processName">{{
                  (ite.processName || "").length > 7
                    ? ite.processName.slice(0, 8) + "..."
                    : ite.processName
                }}</span>
                <el-link v-else type="primary" :href="ite.technologyFile">{{
                  (ite.processName || "").length > 7
                    ? ite.processName.slice(0, 8) + "..."
                    : ite.processName
                }}</el-link>
              </div>
              <div
                class="font-12 color-333 mt8 cursor-pointer el-tooltip__trigger el-tooltip__trigger flex-wj-j"
              >
                <div class="flex-wj">
                  <span>{{ $t("mesProdOrder.total") }}:</span>
                  <span class="font-w">{{ ite.total }}</span>
                </div>
                <div class="flex-wj">
                  <span>{{ $t("mesProdOrderPlan.qualified") }}:</span>
                  <span class="font-w">{{ ite.sumQualifiedQty }}</span>
                </div>
                <div class="flex-wj">
                  <span>{{ $t("mesProdOrderPlan.unqualified") }}</span>
                  <span class="font-w">{{ ite.sumUnqualifiedQty }}</span>
                </div>
              </div>
              <div
                class="font-12 color-333 mt8 cursor-pointer el-tooltip__trigger el-tooltip__trigger"
              >
                {{ $t("mesProdOrderPlan.startVerification")
                }}<span>{{
                  detail.isCheckStartwork == 0
                    ? $t("mesProdOrderPlan.selectTest")
                    : $t("mesProdOrderPlan.mustTest")
                }}</span
                >/<span v-if="detail.isCheckStartworkLevel == 'station'">{{
                  ite.userDefined1 == 1
                    ? $t("mesProdOrderPlan.tested")
                    : $t("mesProdOrderPlan.unverified")
                }}</span>
                <span v-else>{{
                  detail.isHasStartworking == 1
                    ? $t("mesProdOrderPlan.tested")
                    : $t("mesProdOrderPlan.unverified")
                }}</span>
              </div>
            </div>
          </div>
        </div>
      </el-card>

      <br />
      <el-card class="row1 row2" v-loading="loadingtable">
        <div>
          <div class="tit">
            <div class="drawer-card-title__mark"></div>
            <span class="drawer-card-title__text ml8">{{
              $t("mesProdOrderPlan.productWorkOrderList")
            }}</span>
          </div>
          <el-tabs v-model="tabsActiveName" @tab-click="handleTabClick">
            <el-tab-pane
              :key="i"
              v-for="(ite, i) in tabsList"
              :label="ite.name"
              :name="ite.code"
            ></el-tab-pane>
          </el-tabs>

          <div class="center">
            <el-empty
              v-if="['7'].includes(tabsActiveName)"
              :description="$i18n.t('mesProdOrderPlan.underDevelopment')"
            ></el-empty>

            <!-- 生产信息 -->
            <div v-show="tabsActiveName == 1" class="step-height">
              <el-timeline direction="vertical">
                <el-timeline-item
                  placement="top"
                  type="primary"
                  icon="el-icon-more"
                  :key="i"
                  :timestamp="ite.processName"
                  v-for="(ite, i) in mesScanRecordDetailList"
                >
                  <el-card shadow="hover">
                    <!-- <div>
                        <h4>{{ ite.processName }}</h4>
                      </div> -->
                    <template v-if="ite.mesScanRecordDetailList.length">
                      <el-descriptions
                        :column="6"
                        class="description"
                        :key="index"
                        v-for="(item, index) in ite.mesScanRecordDetailList"
                      >
                        <el-descriptions-item
                          :label="$t('mesProdOrder.uniqueCode')"
                          v-if="item.reportWay == 'report_way_unique'"
                          >{{ item.barcode }}</el-descriptions-item
                        >
                        <el-descriptions-item
                          :label="$t('mesProdOrder.scanner')"
                          label-class-name="my-label"
                        >
                          <span class="span-hidden" :title="item.userName">{{
                            item.userName
                          }}</span></el-descriptions-item
                        >
                        <el-descriptions-item
                          :label="$t('mesProdOrder.time')"
                          ><span class="span-hidden" :title="item.scanTime">{{
                            item.scanTime
                          }}</span></el-descriptions-item
                        >
                        <el-descriptions-item
                          :label="$t('mesProdOrder.collectionStation')"
                          label-class-name="my-label"
                          ><span
                            class="span-hidden"
                            :title="item.workCellName"
                            >{{ item.workCellName }}</span
                          ></el-descriptions-item
                        >
                        <el-descriptions-item
                          :label="$t('mesProdOrder.collectionTeam')"
                          label-class-name="my-label"
                          ><span
                            class="span-hidden"
                            :title="item.workTeamName"
                            >{{ item.workTeamName }}</span
                          ></el-descriptions-item
                        >
                        <el-descriptions-item
                          :label="$t('mesProdOrder.totalCount')"
                          v-if="item.reportWay != 'report_way_unique'"
                          >{{ item.count }}</el-descriptions-item
                        >
                        <el-descriptions-item
                          :label="$t('mesProdOrder.unqualifiedQty')"
                          v-if="item.reportWay != 'report_way_unique'"
                          >{{ item.unqualifiedQty }}</el-descriptions-item
                        >
                        <el-descriptions-item
                          :label="$t('mesProdOrder.isBad')"
                          v-if="item.reportWay == 'report_way_unique'"
                        >
                          <el-tag
                            v-if="item.unqualifiedQty > 0"
                            type="danger"
                            effect="dark"
                          >
                            {{ $t("common.yes") }}
                          </el-tag>
                          <el-tag v-else type="success" effect="dark">
                            {{ $t("common.no") }}
                          </el-tag>
                        </el-descriptions-item>
                        <el-descriptions-item
                          :label="$t('mesProdOrderPlan.equipmentName')"
                          label-class-name="my-label"
                        >
                          <span
                            class="span-hidden"
                            :title="item.equipmentName"
                            >{{ item.equipmentName }}</span
                          >
                        </el-descriptions-item>
                        <el-descriptions-item
                          :label="$t('mesProdOrder.repaired')"
                          >{{
                            item.isRepairScanName || "--"
                          }}</el-descriptions-item
                        >
                        <!--<el-descriptions-item :label="$i18n.t('mesProdOrderPlan.checkResult')">-->
                        <!--  <el-tag-->
                        <!--    v-if="item.checkResult"-->
                        <!--    type="success"-->
                        <!--    effect="dark"-->
                        <!--  >-->
                        <!--    自检合格-->
                        <!--  </el-tag>-->
                        <!--  <el-tag v-else type="danger" effect="dark">-->
                        <!--    自检合格-->
                        <!--  </el-tag></el-descriptions-item-->
                        <!--&gt;-->
                      </el-descriptions>
                    </template>

                    <p class="empty" v-else>
                      {{ $t("el.empty.description") }}
                      <i class="el-icon-tickets"></i>
                    </p>
                  </el-card>
                </el-timeline-item>
              </el-timeline>
            </div>

            <!--  异常信息-->
            <el-table
              v-show="tabsActiveName == 2"
              :data="tableData2"
              border
              style="width: 100%"
            >
              <el-table-column
                type="index"
                width="60"
                :label="$t('common.order')"
              ></el-table-column>
              <el-table-column
                prop="productProcessName"
                :label="$t('mesGate.processName')"
                width="280"
              >
              </el-table-column>
              <el-table-column
                prop="equipmentName"
                :label="$t('mesProdOrderPlan.equipmentName')"
                width="280"
              >
              </el-table-column>
              <el-table-column
                prop="faultName"
                :label="$t('mesProdOrder.faultName')"
                width="280"
              />
              <el-table-column
                prop="quantity"
                :label="$t('mesSalesOrder.count')"
              />
              <el-table-column
                prop="userName"
                :label="$t('mesProdOrder.scanner')"
              />
            </el-table>

            <!--  绑料记录-->
            <!--<el-table-->
            <!--  v-show="tabsActiveName == 3"-->
            <!--  :data="tableData3"-->
            <!--  border-->
            <!--  style="width: 100%;"-->
            <!--&gt;-->
            <!--  <el-table-column-->
            <!--    type="index"-->
            <!--    width="60"-->
            <!--    label="序号 "-->
            <!--  ></el-table-column>-->
            <!--  <el-table-column prop="barcode" :label="$i18n.t('mesProdOrderPlan.barCode')" width="180">-->
            <!--  </el-table-column>-->
            <!--  <el-table-column-->
            <!--    prop="orderCode"-->
            <!--    label="生产工单号"-->
            <!--    width="180"-->
            <!--  />-->
            <!--  <el-table-column prop="seriesCode" label="系列编码" width="180" />-->
            <!--  <el-table-column prop="seriesName" label="系列名称" width="180" />-->

            <!--  <el-table-column prop="prodCode" label="产品编码" />-->
            <!--  <el-table-column prop="prodName" :label="$i18n.t('mesProdOrderPlan.prodName')" />-->
            <!--  <el-table-column prop="materialCode" label="采集内容" />-->
            <!--  <el-table-column-->
            <!--    prop="materialName"-->
            <!--    label="主关件名称"-->
            <!--    width="180"-->
            <!--  />-->
            <!--  <el-table-column-->
            <!--    prop="keypartCode"-->
            <!--    label="主关件码"-->
            <!--    width="180"-->
            <!--  />-->
            <!--</el-table>-->
            <!--  成品检验-->
            <el-table
              v-show="tabsActiveName == 4"
              :data="tableData5"
              border
              style="width: 100%"
            >
              <el-table-column
                type="index"
                width="60"
                :label="$i18n.t('common.order')"
              ></el-table-column>
              <el-table-column prop="resultCode" :label="$i18n.t('mesProdOrderPlan.resultCode')" width="250">
              </el-table-column>
              <el-table-column prop="prodName" :label="$i18n.t('mesProdOrderPlan.prodName')" width="300" />
              <el-table-column prop="quantity" :label="$i18n.t('mesProdOrderPlan.quantity')" width="180" />
              <el-table-column prop="result" :label="$i18n.t('mesProdOrderPlan.checkResult')" width="180">
                <template slot-scope="scope">
                  <p>{{ ["——", $i18n.t('mesProdOrderPlan.Qualified'), $i18n.t('mesProdOrderPlan.Unqualified')][scope.row.result] }}</p>
                </template>
              </el-table-column>
              <el-table-column prop="status" :label="$i18n.t('mesProdOrderPlan.status')">
                <template slot-scope="scope">
                  <p>{{ [$i18n.t('mesProdOrderPlan.notStarted'), $i18n.t('mesProdOrderPlan.inProgress'), $i18n.t('mesProdOrderPlan.finished')][scope.row.status] }}</p>
                </template>
              </el-table-column>
            </el-table>
            <!--  生产入库-->
            <el-table
              v-show="tabsActiveName == 5"
              :data="tableData6"
              border
              style="width: 100%"
            >
              <el-table-column
                type="index"
                width="60"
                :label="$i18n.t('common.order')"
              ></el-table-column>
              <el-table-column prop="resultCode" :label="$i18n.t('mesProdOrderPlan.resultCode')" width="250">
              </el-table-column>
              <el-table-column prop="prodName" :label="$i18n.t('mesProdOrderPlan.prodName')" width="300" />
              <el-table-column prop="quantity" :label="$i18n.t('mesProdOrderPlan.quantity')" width="180" />
              <el-table-column prop="result" :label="$i18n.t('mesProdOrderPlan.checkResult')" width="180">
                <template slot-scope="scope">
                  <p>{{ ["——", $i18n.t('mesProdOrderPlan.Qualified'), $i18n.t('mesProdOrderPlan.Unqualified')][scope.row.result] }}</p>
                </template>
              </el-table-column>
              <el-table-column prop="status" :label="$i18n.t('mesProdOrderPlan.status')">
                <template slot-scope="scope">
                  <p>
                    {{ [$i18n.t('mesProdOrderPlan.waitingForInspection'), $i18n.t('mesProdOrderPlan.UnderInspection'), $i18n.t('mesProdOrderPlan.detectionCompleted')][scope.row.status] }}
                  </p>
                </template>
              </el-table-column>
            </el-table>

            <!--  异常物料-->
            <!-- <el-table
              v-show="tabsActiveName == 7"
              :data="tableData7"
              border
              style="width: 100%;"
            >
              <el-table-column
                type="index"
                width="60"
                label="序号 "
              ></el-table-column>
              <el-table-column prop="orderNo" label="单据编号" width="180">
              </el-table-column>
              <el-table-column prop="goodsCode" label="物料编码" width="180" />
              <el-table-column prop="goodsName" label="物料名称" width="180" />
              <el-table-column prop="unit" label="单位" width="180" />
              <el-table-column
                prop="onlineVerificationAmount"
                label="上线验证数量"
              />
              <el-table-column
                prop="onlineVerificationStatus"
                label="上线验证状态"
              />
            </el-table> -->
            <!-- 过程检测 -->
            <div v-show="tabsActiveName == 3" class="step-height">
              <el-timeline direction="vertical" v-if="false">
                <el-timeline-item
                  placement="top"
                  type="primary"
                  icon="el-icon-more"
                  :key="i"
                  :timestamp="ite.processName"
                  v-for="(ite, i) in tableData4"
                >
                  <el-card shadow="hover">
                    <!-- <div>
                        <h4>{{ ite.processName }}</h4>
                      </div> -->
                    <template v-if="ite.mesCheckRecordList.length">
                      <el-table
                        :data="ite.mesCheckRecordList"
                        border
                        style="width: 100%"
                      >
                        <el-table-column
                          type="index"
                          width="60"
                          :label="$i18n.t('common.order')"
                        ></el-table-column>
                        <el-table-column
                          prop="barcode"
                          :label="$i18n.t('mesProdOrderPlan.barCode')"
                          width="180"
                        >
                        </el-table-column>
                        <el-table-column
                          prop="prodCode"
                          :label="$i18n.t('mesProdOrderPlan.modelCode')"
                          width="180"
                        />
                        <el-table-column
                          prop="prodName"
                          :label="$i18n.t('mesProdOrderPlan.modelName')"
                          width="180"
                        />
                        <el-table-column
                          prop="workCellCode"
                          :label="$i18n.t('mesProdOrderPlan.collectionStationNumber')"
                          width="180"
                        />

                        <el-table-column
                          prop="workCellName"
                          :label="$i18n.t('mesProdOrderPlan.collectedWorkCellName')"
                        />
                        <el-table-column prop="workTeamCode" :label="$i18n.t('mesProdOrderPlan.teamNumber')" />
                        <el-table-column prop="workTeamName" :label="$i18n.t('mesProdOrderPlan.teamName')" />
                        <el-table-column
                          prop="checkUserName"
                          :label="$i18n.t('mesProdOrderPlan.inspectorName')"
                          width="180"
                        />
                        <el-table-column
                          prop="checkTime"
                          :label="$i18n.t('mesProdOrderPlan.checkTime')"
                          width="180"
                        /><el-table-column
                          prop="prodStatus"
                          :label="$i18n.t('mesProdOrderPlan.inspectionStatus')"
                          width="180"
                        >
                          <template slot-scope="scope">
                            <div>
                              <el-tag
                                :type="tagStatus[scope.row.prodStatus].type"
                                >{{ tagStatus[scope.row.prodStatus].name }}
                              </el-tag>
                            </div>
                          </template>
                        </el-table-column>
                      </el-table>
                    </template>

                    <p class="empty" v-else>
                      {{ $i18n.t("mesProdOrderPlan.noInformation") }} <i class="el-icon-tickets"></i>
                    </p>
                  </el-card>
                </el-timeline-item>
              </el-timeline>
              <el-table :data="tableData4" border style="width: 100%">
                <el-table-column
                  type="index"
                  width="60"
                  :label="$t('common.order')"
                ></el-table-column>

                <el-table-column
                  prop="templateTypeName"
                  width="120"
                  :label="$t('mesProdOrder.inspectionType')"
                >
                </el-table-column>
                <el-table-column
                  prop="resultCode"
                  :label="$t('mesProdOrder.resultCode')"
                  min-width="200"
                >
                </el-table-column>
                <el-table-column
                  prop="prodName"
                  :label="$t('mesGateOrderWhite.prodName')"
                  min-width="200"
                />
                <el-table-column
                  prop="quantity"
                  :label="$t('mesProdOrder.checkCount')"
                  width="180"
                />
                <el-table-column
                  prop="result"
                  :label="$t('mesProdOrder.checkResult')"
                  width="180"
                >
                  <template slot-scope="scope">
                    <p>
                      {{
                        [
                          "——",
                          $i18n.t("mesProdOrderPlan.Qualified"),
                          $i18n.t("mesProdOrderPlan.Unqualified"),
                        ][scope.row.result]
                      }}
                    </p>
                  </template>
                </el-table-column>
                <el-table-column prop="status" :label="$t('common.status')">
                  <template slot-scope="scope">
                    <p>
                      {{
                        [
                          $i18n.t("mesProdOrderPlan.notStarted"),
                          $i18n.t("mesProdOrderPlan.inProgress"),
                          $i18n.t("mesProdOrderPlan.finished"),
                        ][scope.row.status]
                      }}
                    </p>
                  </template>
                </el-table-column>
              </el-table>
            </div>
            <!-- 开工扫描 -->
            <el-table
              v-show="tabsActiveName == 8"
              :data="tableMesStartData"
              border
              style="width: 100%"
            >
              <el-table-column
                type="index"
                width="60"
                :label="$t('common.order')"
              ></el-table-column>
              <el-table-column
                prop="scanTime"
                :label="$t('mesProdOrder.scanTime')"
                width="180"
              >
              </el-table-column>
              <el-table-column
                prop="userName"
                :label="$t('mesProdOrder.startupWorker')"
                width="180"
              />
              <el-table-column
                prop="productProcessName"
                :label="$t('mesCoEsopInfo.processName')"
                width="180"
              />
              <el-table-column
                prop="lineName"
                :label="$t('mesCoEsopInfo.line')"
                width="180"
              />
              <el-table-column
                prop="workCellName"
                :label="$t('mesCoEsopInfo.station')"
                width="180"
              />
              <el-table-column
                prop="equipmentName"
                min-width="120"
                :label="$t('mesProdOrderPlan.equipment')"
              />
              <el-table-column
                prop="frockName"
                :label="$t('mesCoEsopInfo.sopFrockList')"
                width="180"
              />
              <el-table-column
                prop="workDate"
                :label="$t('mesWorkCalendars.workday')"
                width="180"
              />
            </el-table>
            <!-- 上料扫描 -->
            <el-table
              v-show="tabsActiveName == 9"
              :data="tableMesMaterialData"
              border
              style="width: 100%"
            >
              <el-table-column
                type="index"
                width="60"
                :label="$t('common.order')"
              ></el-table-column>
              <el-table-column
                prop="createTime"
                min-width="140"
                :label="$t('mesProdOrder.scanDate')"
              />
              <el-table-column
                prop="createByName"
                width="120"
                :label="$t('mesProdOrder.scanner')"
              />
              <el-table-column
                prop="prodCode"
                :label="$t('mesGateProdWhite.goodsCode')"
                min-width="180"
              >
              </el-table-column>
              <el-table-column
                prop="prodName"
                :label="$t('mesGateProdWhite.goodsName')"
                min-width="180"
              />
              <el-table-column
                prop="unit"
                :label="$t('mesCoEsopInfo.unit')"
                width="180"
              />
              <el-table-column
                prop="batchNo"
                :label="$t('mesProdOrder.batchNo')"
                width="180"
              />
              <el-table-column
                prop="boxCode"
                :label="$t('mesProdOrder.boxCode')"
                width="180"
              />
              <el-table-column
                prop="packageCode"
                :label="$t('mesProdOrder.packageCode')"
                width="180"
              />
            </el-table>
            <!--日志 -->
            <div v-show="tabsActiveName == 6" class="step-height">
              <el-timeline
                direction="vertical"
                v-if="tableData8 && tableData8.length"
              >
                <el-timeline-item
                  placement="top"
                  type="primary"
                  icon="el-icon-more"
                  :key="i"
                  :timestamp="item.productProcessName"
                  v-for="(item, i) in tableData8"
                >
                  <el-card shadow="hover">
                    <!-- <div>
                        <h4>{{ ite.processName }}</h4>
                      </div> -->

                    <el-descriptions
                      :column="4"
                      class="description"
                      :key="index"
                    >
                      <el-descriptions-item
                        :label="$t('mesProdOrder.scanner')"
                        >{{ item.userName }}</el-descriptions-item
                      >
                      <el-descriptions-item
                        :label="$t('mesProdOrder.scanDate')"
                        >{{ item.scanTime }}</el-descriptions-item
                      >
                      <el-descriptions-item
                        :label="$t('mesProdOrder.typeCode')"
                        >{{ item.prodCode }}</el-descriptions-item
                      >
                      <!-- <el-descriptions-item :label="$i18n.t('mesProdOrderPlan.modelCode')">{{ item.prodCode }}</el-descriptions-item> -->
                      <!--                      <el-descriptions-item label="版本号">{{-->
                      <!--                        item.bomVersionNumber-->
                      <!--                      }}</el-descriptions-item>-->
                      <el-descriptions-item
                        :label="$t('mesProdOrder.isRepairScanName')"
                        >{{ item.isRepairScanName }}</el-descriptions-item
                      >
                      <el-descriptions-item
                        :label="$t('mesProdOrderPlan.qualifiedQty')"
                        >{{ item.qualifiedQty }}</el-descriptions-item
                      >
                      <el-descriptions-item
                        :label="$t('mesProdOrderPlan.unqualifiedQty')"
                        >{{ item.unqualifiedQty }}</el-descriptions-item
                      >
                      <!--                      <el-descriptions-item label="版本号">{{-->
                      <!--                        item.bomVersionNumber-->
                      <!--                      }}</el-descriptions-item>-->
                      <!--                      <el-descriptions-item :label="$i18n.t('mesProdOrderPlan.checkResult')">-->
                      <!--                        <el-tag-->
                      <!--                          v-if="item.checkResult == 1"-->
                      <!--                          type="success"-->
                      <!--                          effect="dark"-->
                      <!--                        >-->
                      <!--                          良品-->
                      <!--                        </el-tag>-->
                      <!--                        <el-tag v-else type="danger" effect="dark">-->
                      <!--                          不良品-->
                      <!--                        </el-tag></el-descriptions-item-->
                      <!--                      >-->
                    </el-descriptions>
                  </el-card>
                </el-timeline-item>
              </el-timeline>
              <el-empty
                v-else
                :description="$t('el.empty.description')"
              ></el-empty>
            </div>
          </div>
        </div>
      </el-card>
    </div>
    <!-- </el-dialog> -->
  </div>
</template>

<script>
//例如：import 《组件名称》 from '《组件路径》';
import {
  getListByPlanCode,
  getProductionProcess,
  getMesScanKeyPartsList,
  getProductionLog,
  getScanRecord,
  getMessageByOrderCode,
  mesMaterialRequisitionDetail,
  mesMaterialRequisition,
  qmsInspectionResult,
  selectByOrderCode,
  mesScanStart,
  mesLoadmaterialVerificationDetail,
  getMesCheckRecordList,
  getWholeProcessOrder as getWholeProcess,
} from "@/api/order/mesProdOrderPlan";
export default {
  name: "",
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    //这里存放数据
    return {
      dialogVisible: false,
      loading1: false,
      loadingtable: false,
      orderStatusList: [
        {
          type: 0,
          name: $i18n.t("mesProdOrderPlan.waiteIssue"),
        },
        {
          type: 1,
          name: $i18n.t("mesProdOrderPlan.issued"),
        },
        {
          type: 2,
          name: $i18n.t("mesProdOrderPlan.ready"),
        },
        {
          type: 3,
          name: $i18n.t("mesProdOrderPlan.inProgress"),
        },
        {
          type: 4,
          name: $i18n.t("mesProdOrderPlan.completed"),
        },
        {
          type: 5,
          name: $i18n.t("mesProdOrderPlan.freeze"),
        },
        {
          type: 6,
          name: $i18n.t("mesProdOrderPlan.abnormalJoint"),
        },
      ],

      detail: {
        orderStatus: 0,
      },
      radiusList: [],
      tableData: [],
      tableData2: [],
      tableData3: [],
      tableData4: [],
      tableData5: [],
      tableData6: [],
      tableData7: [],
      tableData8: [],
      tableData9: [],
      tableMesStartData: [],
      tableMesMaterialData: [],
      tabsActiveName: "1",
      tabsList: [
        { code: "1", name: $i18n.t("mesProdOrderPlan.productionInfo") },
        { code: "8", name: $i18n.t("mesProdOrderPlan.startupInfo") },
        // { code: "9", name: $i18n.t("mesProdOrder.feedingInfo") },
        { code: "2", name: $i18n.t("mesProdOrderPlan.exceptionInfo") },
        // { code: "3", name: "绑料记录" },
        { code: "3", name: $i18n.t("mesProdOrderPlan.processQualityInspection") },
        // { code: "4", name: "成品出库检测" },
        // { code: "5", name: "生产入库检测" },
        // { code: "7", name: "异常物料" },
        { code: "6", name: $i18n.t("mesProdOrderPlan.log") },
      ],
      mesScanRecordDetailList: [],
      id: "",

      tagStatus: [
        {
          type: "danger",
          name: $i18n.t("mesProdOrderPlan.defectiveReturnToRepair"),
        },
        {
          type: "warning",
          name: $i18n.t("mesProdOrderPlan.returnToRepair"),
        },
        {
          type: "success",
          name: $i18n.t("mesProdOrderPlan.confirmQualification"),
        },
      ],
    };
  },
  //监听属性 类似于data概念
  computed: {
    orderStatusText() {
      console.log();
      const status = this.orderStatusList.find(
        (val) => val.type == this.detail.orderStatus
      );
      return status ? status.name : "";
    },
  },
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    async init(orderCode) {
      this.dialogVisible = true;
      this.tabsActiveName = "1";
      this.id = orderCode;
      this.getWholeProcess(orderCode);
      this.getProductionProcess(orderCode);
      // this.selectByOrderCode(orderCode);
    },
    handleClose() {
      this.dialogVisible = false;
    },
    //异常物料  .临时改变业务需求
    async mesMaterialRequisition(id) {
      return;
      let data = await mesMaterialRequisition({ orderCode: id });
      let res = await mesMaterialRequisitionDetail({
        orderNoList: data.data.orderNo,
      });
      this.tableData7 = res.data.result;
    },
    //成品检验 过程检验 ,生产入库
    async qmsInspectionResult(orderCode, type) {
      let judgeTemplateType = "tableData4";
      let tableKey = "";
      switch (type) {
        case 1:
          judgeTemplateType = "0";
          tableKey = "tableData4";
          break;
        case 2:
          judgeTemplateType = "1";
          tableKey = "tableData5";
          break;
        case 3:
          judgeTemplateType = "2";
          tableKey = "tableData6";
          break;
      }
      let res = await qmsInspectionResult({
        orderCode,
        judgeTemplateType,
      });

      console.log(judgeTemplateType, tableKey);
      this[tableKey] = res.data.result;
    },
    //异常信息
    async selectByOrderCode(orderCode) {
      let res = await selectByOrderCode(orderCode);
      this.tableData2 = res.data.result;
    },

    handleTabClick({ index }) {
      console.log(index, "iindex");
      let id = this.id;
      if (index == 1) {
        //开工信息
        let data = { orderCode: id };
        this.getMesScanStart(data);
      }
      // else if (index == 20) {
      //   //上料信息
      //   let data = { orderCode: id }
      //   this.GetLoadmaterialVerification(data)
      // }
      else if (index == 2) {
        //异常信息
        this.selectByOrderCode(id);
      } else if (index == 3) {
        //过程检验
        this.qmsInspectionResult(id, 1);
      } else if (index == 4) {
        //日志
        this.getProductionLog(id);
      }
      // else if (index == 4) {
      //   this.qmsInspectionResult(id, 3);
      // }
      // else if (index == 5) {
      //   this.getProductionLog(id);
      // }
      // else if (index == 6) {
      //   this.mesMaterialRequisition(id);
      // }
      // else {
      //   this.getProductionProcess(id);
      // }
    },
    //详情页,下方table 订单号的跳转
    goUrl(row) {
      this.$message.warning($i18n.t("mesProdOrderPlan.waitingForUpdate~"));

      // this.$router.push({
      //   path: "/xxxx",
      //   query: {
      //     id: row.id,
      //   },
      // });
    },

    //查询过程质检列表 ,弃用 bing
    async getMesCheckRecordList(id) {
      try {
        this.loadingtable = true;
        let res = await getMesCheckRecordList(id);
        this.tableData4 = res.data.result;
        this.tableData4[0].mesCheckRecordList = [
          {
            workCellCode: 12121,
            prodStatus: 1,
          },
        ];
      } finally {
        this.loadingtable = false;
        this.$nextTick(() => {
          this.setHeight100();
        });
      }
    },

    //绑料信息
    async getMesScanKeyPartsList(id) {
      try {
        this.loadingtable = true;
        let res = await getMesScanKeyPartsList({ orderCode: id });
        this.tableData3 = res.data.result;
      } finally {
        this.loadingtable = false;
        this.$nextTick(() => {
          this.setHeight100();
        });
      }
    }, //日志
    async getProductionLog(id) {
      try {
        this.loadingtable = true;
        let res = await getProductionLog(id);
        this.tableData8 = res.data.result;
      } finally {
        this.loadingtable = false;
        this.$nextTick(() => {
          this.setHeight100();
        });
      }
    },
    //开工信息
    async getMesScanStart(id) {
      try {
        this.loadingtable = true;
        let res = await mesScanStart(id);
        this.tableMesStartData = res.data.result;
      } finally {
        this.loadingtable = false;
        this.$nextTick(() => {
          this.setHeight100();
        });
      }
    },
    // //上料信息
    // async GetLoadmaterialVerification(id) {
    //   try {
    //     this.loadingtable = true
    //     let res = await mesLoadmaterialVerificationDetail(id)
    //     this.tableMesMaterialData = res.data.result
    //   } finally {
    //     this.loadingtable = false
    //     this.$nextTick(() => {
    //       this.setHeight100()
    //     })
    //   }
    // },
    //工序流程
    async getWholeProcess(id) {
      try {
        this.loading1 = true;
        let res = await getWholeProcess(id);
        this.detail = res.data.result;
        this.radiusList = res.data.result.mesProcessList;
      } finally {
        this.loading1 = false;
      }
    },

    setHeight100() {
      // let div = document.querySelectorAll(".worksee .el-dialog__body")[0];
      // div.scrollTop = div.scrollHeight;
    },
    // //生产信息
    async getProductionProcess(id) {
      try {
        this.loading1 = true;
        let res = await getProductionProcess({ orderCode: id });

        this.mesScanRecordDetailList = res.data.result;
      } finally {
        this.loading1 = false;
        this.$nextTick(() => {
          this.setHeight100();
        });
      }
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    let { id } = this.$route.query;
    if (!id) {
      this.$message.warning($i18n.t("mesProdOrderPlan.jumpWarning"));
      return;
    }
    this.init(id);
  },
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style scoped lang="scss">
/deep/.el-descriptions-item__container {
  align-items: center !important;
}
.see {
  .overflow {
    overflow: auto;
  }
  .box-card {
    .progress {
      width: 400px;
    }

    .tit {
      padding-bottom: 28px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      & > div {
        display: flex;
      }
      .right {
        margin-left: 10px;
        padding: 4px 8px;
        background-color: #f5f5f5;
        border-radius: 2px;
        font-size: 12px;
        color: #5a6f82;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        .icon {
          width: 4px;
          height: 4px;
          background: #93b0cb;
          border-radius: 50%;
        }
        span {
          line-height: 20px;
          padding-left: 4px;
        }
        .bkred {
          background: #ff4656 !important;
        }
        .bksuccess {
          background: #00bfa5 !important;
        }
        .red {
          color: #ff4656 !important;
        }
        .success {
          color: #00bfa5 !important;
        }
      }
    }
    .drawer-line {
      height: 1px;
      margin: 20px 0px;
      background-color: #e5e5e5;
    }
    .margin-top {
      margin-top: 20px;
    }
    .fong-w {
      font-weight: 600;
    }
    /deep/.el-descriptions-item__container {
      font-size: 14px;
    }
    .step {
      width: 80%;
      /deep/.el-step__head {
        width: 80% !important;
      }
      /deep/ .el-step.is-horizontal .el-step__line {
        height: 0px;
        top: 11px;
        left: 40px;
        right: 0;
        //  border: 1px dashed #3d82ea;
        width: 100%;

        height: 1px;

        background-image: linear-gradient(
          to right,
          #3d82ea 0%,
          #3d82ea 50%,
          transparent 50%
        );
        background-size: 13px 1px;

        background-repeat: repeat-x;
      }
      /deep/.el-step__icon.is-text {
        border: 0px !important;
      }
      /deep/.el-step__line {
        background: white;
      }
      .activeIcon {
        /deep/ .el-step__line-inner {
          border-width: 1px !important;
          width: 100% !important;
        }
      }
    }
  }

  .row1 {
    .count {
      color: #ff4656;
      padding-right: 5px;
    }

    .date {
      font-size: 12px;
    }
  }
  .center {
    min-height: 300px;
  }
  .row2 {
    .tit {
      display: flex;
      margin-bottom: 20px;
      align-items: center;
      .drawer-card-title__mark {
        width: 4px;

        height: 16px;
        background-color: #00bfa5;
      }
      .ml8 {
        color: #333;
        font-size: 16px;
        font-weight: 700;
        margin-left: 8px;
      }
      .ml5 {
        color: #333;
        font-size: 13px;
        font-weight: 700;
        margin-left: 8px;
      }
    }
    /deep/.el-timeline-item__timestamp {
      font-size: 16px;
      color: black;
    }
    .description {
      //   display: flex;
      //  justify-content: space-between;
      //   align-items: center;
      //  margin: 5px 0;
      & > * {
        // margin-right: 25px;
      }
    }
    .step-height {
      height: 350px;
      overflow: auto;
    }
    .empty {
    }

    .process_chunk {
      //width: 18%;
      position: relative;
      min-width: 200px;
    }
    .flex-col {
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
      -ms-flex-direction: column;
      flex-direction: column;
    }
    .content-start {
      -webkit-box-pack: start;
      -ms-flex-pack: start;
      justify-content: flex-start;
    }

    .mt-24 {
      margin-top: 24px;
    }
    .raduis_line {
      width: 50%;
      border-top: 2px dashed #817e7e;
      position: absolute;
      left: 0;
      top: 53px;
      z-index: 1;
      -webkit-transform: translateX(-50%);
      transform: translate(-50%);
    }
    .raduis {
      width: 96px;
      height: 96px;
      z-index: 99;
      //  background: #c2f2ec;
      border: 8px solid #ffffff;
      opacity: 1;
      border-radius: 50%;
    }
    .rihg-0 {
      color: rgb(155, 173, 188);
      background-color: rgb(235, 240, 245);
    }
    .rihg-10 {
      color: rgb(190, 147, 46);
      background-color: rgb(232, 219, 152);
    }
    .rihg-100 {
      color: rgb(0, 191, 165);
      background-color: rgb(194, 242, 236);
    }
    .flex-ac {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
    }
    .content-center {
      justify-content: center;
    }
    .strong {
      font-weight: 700;
    }
    .cursor-pointer {
      cursor: pointer;
    }
    .color-333 {
      color: #333;
    }
    .font-14 {
      font-size: 14px;
    }
    .font-12 {
      font-size: 12px;
    }
    .mt8 {
      margin-top: 8px;
    }
    .cursor-pointer {
      cursor: pointer;
    }
    *,
    *:before,
    *:after {
      -webkit-box-sizing: inherit;
      box-sizing: inherit;
    }
  }
  .row3 {
  }
}
.span-hidden {
  word-break: break-all;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
}

/deep/.my-label {
  //width: 50%;
}
.flex-wj-j {
  display: flex;
  justify-content: space-between;
  .flex-wj {
    margin-right: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    .font-w {
      font-weight: 600;
    }
  }
}
</style>
